<!--
 * @Author: daokun.du@hand-china.com
 * @Date: 2023-05-31 17:36:40
 * @LastEditTime: 2023-05-31 18:45:03
 * @LastEditors: daokun.du@hand-china.com
 * @Description: 
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>理解MVVM模型+数据代理</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>学校名称: {{name}}</h1>
      <h1>学校地址: {{address}}</h1>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false
    
    const vm = new Vue({
      el: '#root',
      data: {
        name: '青农',
        address: '青岛'
      }
    })

    // number变量通过Object.defineProperty方法实现了与对象person的交互
    let number = 22

    let person = {
      name: '内卷小子',
      sex: '男'
    }

    // 参数：1、修改哪个对象，2、修改哪个属性，3、配置项
    // 该方法定义的属性不可被枚举，及不能被遍历。
    // 可通过在配置项中添加 enumerable:true,使得该属性可被遍历
    // 可通过在配置项中添加 writable:true,使得该属性可被修改
    // 可通过在配置项中添加 configurable:true,使得该属性可被删除
    Object.defineProperty(person, "age", {
      // value: 18

      // 当读取person的age属性时，get函数被调用，且返回值就是age的值
      get:function(){
        console.log('有人读取age属性值了!');
        return number
      },

      // 当修改person的age属性时，set函数被调用，收到修改的值
      set(value){
        console.log('有人修改age属性值了!');
        number = value
      }
    })

    console.log(person);
    console.log(Object.keys(person)); // ["name", "sex"]


    <!-- "数据代理： 通过一个对象代理，对另一个对象中的属性进行操作" -->
    let obj1 = {x: 100}
    let obj2 = {y: 200}

    Object.defineProperty(obj2, 'x', {
      get(){
        return obj1.x
      },
      set(value){
        obj1.x = value
      }
    })
  </script>
</html>